import React from 'react';
import {
  Dialog,
  Form,
  Field,
  Checkbox,
  Switch,
  Radio,
  NumberPicker,
  Grid,
  Balloon,
  Button,
  Input,
  Tag,
} from '@teamix/ui';
import { YunxiaoIcon, ButtonIcon } from '@alife/devops-ui';
import MemberTrigger from 'components/memberTrigger';
import debounce from 'lodash.debounce';
import './index.scss';
// import { searchProtectedBranches } from 'api/index.js';
import { navigate, navigateOpen } from 'utils/router';
import CONSTANTS from 'utils/constants.js';
import docs from 'utils/docs';
import { getFeature } from 'utils/features';
import BranchAndTagSelect from 'components/branchAndTagSelect';
import ListEmpty from 'atComponents/ListEmpty';
import track from 'utils/track';
import { isTBDomain, isVPC } from 'utils/tenant';
import intl from '../../../../../../../../../../locale';

const { Row, Col } = Grid;
const { Group: CheckboxGroup } = Checkbox;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    fixedSpan: 5,
  },

  wrapperCol: {
    span: 14,
  },
};

const formItemLayout2 = {
  labelCol: {
    span: 6,
  },

  wrapperCol: {
    span: 14,
  },
};

const roles = [
  {
    label: intl.get({
      id: 'code-assets.containers.protectedModal.Administrator',
      defaultMessage: '管理员',
    }),
    value: 40,
  },

  {
    label: intl.get({
      id: 'code-assets.containers.protectedModal.Developers',
      defaultMessage: '开发者',
    }),
    value: 30,
  },
];

const mergeModes = getFeature('project.setting.branch_setting.merge_modes');

const allowPushDataSource = [
  {
    value: '40',
    label: intl.get({
      id: 'code-assets.containers.protectedModal.Managers',
      defaultMessage: '管理者',
    }),
  },

  {
    value: '40,30',
    label: intl.get({
      id: 'code-assets.containers.protectedModal.AdministratorsAndDevelopers',
      defaultMessage: '管理者 + 开发者',
    }),
  },

  {
    value: '',
    label: intl.get({ id: 'code-assets.containers.protectedModal.No', defaultMessage: '无' }),
  },
];

const { testNames } = CONSTANTS.ENUM;

export default class DeleteModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      matchedBranchList: [],
      submitting: false,
      showFlowList: false,
    };

    this.field = new Field(this, {
      onChange: (name, value) => {
        if (name === 'branch') {
          this.onChange(value, name);
        }
      },
    });

    this.getMatchedBranches = debounce(this.getMatchedBranches.bind(this), 300);
  }

  componentDidMount() {
    const { record } = this.props;
    this.getMatchedBranches(record.branch);
    this.props.getServices();

    // 设置流水线checkbox的默认值
    const { test_setting } = record;
    if (test_setting && test_setting.check_config && test_setting.check_config.check_items) {
      const { check_items } = test_setting.check_config;
      const requiredItems = check_items.filter((item) => item.required);
      if (requiredItems.length) {
        this.setState({ showFlowList: true });
      }
    }
  }

  onClose = () => {
    this.props.updateData({
      isModalOpen: false,
      // goServiceSetting: false,
    });
  };

  handleCallback = (params) => {
    this.setState({
      ...params,
    });
  };

  handleOk = () => {
    if (this.state.submitting) return;
    this.field.validate((errors) => {
      this.setState({ submitting: true });
      if (!errors) {
        if (this.props.isUpdatingRecord) {
          return;
        }
        this.props.addRecord();
      }
      this.setState({ submitting: false });
    });
  };

  renderTestNames = (tests) => {
    return (
      <Row className="row-wrap">
        {tests.map((item) => {
          return (
            <Col span={12} key={item.key}>
              <div className="test-item">
                <Checkbox
                  checked={item.value}
                  onChange={(value) => {
                    this.toggleTests(value, item.key);
                  }}
                />

                <div className="test-item-content">
                  <div className="test-item-content-title">{item.label}</div>
                  <div className="test-item-content-des">{item.des}</div>
                </div>
              </div>
            </Col>
          );
        })}
      </Row>
    );
  };

  renderFlowName = (test_setting) => {
    // 专有云环境下，不展示flow卡点
    if (isVPC) {
      return null;
    }

    if (!test_setting.check_config) {
      //  如果没有配置流水线检测，则默认展示代码库上运行的流水线，
      const new_check_config = {};
      const { flowBuildNames } = this.props;
      if (flowBuildNames && flowBuildNames.length) {
        const check_items = flowBuildNames.map((item) => {
          return { name: item.name, required: false };
        });
        new_check_config.check_items = check_items;
      } else {
        new_check_config.check_items = [];
      }
      test_setting.check_config = new_check_config;
    }

    const { check_config } = test_setting;
    return [
      <Row className="flow-wrap">
        <Col span={12} key={'check-config'}>
          <div className="test-item">
            <Checkbox
              checked={this.state.showFlowList}
              onChange={(value) => {
                this.setState({ showFlowList: value });
                if (value) {
                  track({
                    action: 'enable_pipeline_detection',
                    page: 'Repo-Settings-Protect-Branches',
                    type: '',
                    control: '',
                  });
                } else {
                  track({
                    action: 'disable_pipeline_detection',
                    page: 'Repo-Settings-Protect-Branches',
                    type: '',
                    control: '',
                  });

                  // 取消流水线整体checkbox时，去掉flow所有检测。
                  this.onFlowTaskChange([]);
                }
              }}
            />

            <div className="test-item-content">
              <div className="test-item-content-title">
                {intl.get({
                  id: 'code-assets.containers.protectedModal.PipelineDetection',
                  defaultMessage: '流水线检测',
                })}
              </div>
              <div className="test-item-content-des">
                {intl.get({
                  id: 'code-assets.containers.protectedModal.YunxiaoEnterpriseLevelContinuousDelivery',
                  defaultMessage: '云效企业级持续交付产品 Flow 支持',
                })}
              </div>
            </div>
          </div>
        </Col>
      </Row>,
      <div>{this.state.showFlowList ? this.renderFlowList(check_config.check_items) : null}</div>,
    ];
  };

  renderFlowList = (all_check_items_all = []) => {
    const { flowBuildNames } = this.props;
    const all_check_items = all_check_items_all.map((v) => {
      const item = flowBuildNames.filter((i) => i.name === v.name);
      if (item && item.length) {
        v.pipelineValid = !item[0].pipeLineInvalid;
      }
      return v;
    });
    // 默认使用aliyun的链接
    let newFlowLink = 'https://flow.aliyun.com/my/new';
    if (isTBDomain) {
      newFlowLink = 'https://flow.teambition.com/my/new';
    }
    // 流水线未被设置为卡点并且已失效，则忽略不展示
    const check_items = all_check_items.filter((v) => v.required || v.pipelineValid);

    if (check_items.length) {
      return (
        <div className="flow-list-wrapper">
          <div className="flow-wrapper-des">
            {intl.get({
              id: 'code-assets.containers.protectedModal.TheFollowingIsAList',
              defaultMessage: '以下为当前仓库关联过的流水线列表，请选择合并前必须通过的检测项',
            })}
          </div>
          <CheckboxGroup
            defaultValue={check_items.filter((item) => item.required).map((item) => item.name)}
            dataSource={check_items.map((item) => {
              const tag = item.pipelineValid ? null : (
                <Balloon
                  closable={false}
                  trigger={
                    <Tag type="normal" style={{ marginLeft: 8 }}>
                      已失效
                    </Tag>
                  }
                >
                  找不到流水线，请前往Flow确认流水线状态{' '}
                  <a href={docs('howToUsePipelineDetection')} target="_blank" rel="noreferrer">
                    了解更多
                  </a>
                </Balloon>
              );
              return {
                label: (
                  <span>
                    {item.name}
                    {tag}
                  </span>
                ),
                value: item.name,
              };
            })}
            onChange={this.onFlowTaskChange}
            size={'medium'}
            itemDirection={'ver'}
          />
        </div>
      );
    } else {
      return (
        <div className="flow-list-wrapper">
          <ListEmpty
            size="small"
            content=""
            description={
              <span>
                {intl.get({
                  id: 'code-assets.containers.protectedModal.ToCreateAFlowOr',
                  defaultMessage: '请先前往 Flow 创建或关联流水线，',
                })}
                <a href={docs('howToAssociateAPipeline')} target="_blank" rel="noreferrer">
                  {intl.get({
                    id: 'code-assets.containers.protectedModal.HowDoIAssociateA',
                    defaultMessage: '如何关联流水线？',
                  })}
                </a>
              </span>
            }
            image="none"
            btns={[
              <Button
                type="primary"
                onClick={() => {
                  track({
                    action: 'new_pipeline',
                    page: 'Repo-Settings-Protect-Branches',
                    type: '',
                    control: '',
                  });

                  navigateOpen(newFlowLink);
                }}
              >
                {intl.get({
                  id: 'code-assets.containers.protectedModal.CreateAPipeline',
                  defaultMessage: '新建流水线',
                })}
              </Button>,
            ]}
            style={{ marginBottom: 24 }}
          />
        </div>
      );
    }
  };

  onFlowTaskChange = (value) => {
    const { record } = this.props;
    const { test_setting } = record;
    const { check_config } = test_setting;

    const allCheckNames = check_config.check_items.map((item) => item.name);
    const newChecks = [];
    allCheckNames.forEach((n) => {
      newChecks.push({ name: n, required: value.includes(n) });
    });
    check_config.check_items = newChecks;

    this.props.updateData({
      record: JSON.parse(JSON.stringify(record)),
    });
  };

  // 选择测试项
  toggleTests = (value, key) => {
    const { record } = this.props;
    const { test_setting = {} } = record;
    if (!test_setting[key]) {
      test_setting[key] = {};
    }
    test_setting[key].enabled = value;
    this.props.updateData({
      record: JSON.parse(JSON.stringify(record)),
    });
  };

  // 测试的开关
  onTestSettingChange = (value, key) => {
    const { record } = this.props;
    const { test_setting = {} } = record;
    test_setting[key] = value;
    this.props.updateData({
      record: JSON.parse(JSON.stringify(record)),
    });
  };

  getMatchedBranches(value) {
    console.log('getMatchedBranches', value);
    // 分支搜索暫不支持
    // searchProtectedBranches({ branch: value })
    //   .then((result) => {
    //     this.setState({
    //       matchedBranchList: result.slice(1),
    //     });
    //   })
    //   .catch(() => {
    //     this.setState({
    //       matchedBranchList: [],
    //     });
    //   });
  }

  onChange = (value, type) => {
    if (type === 'branch') {
      this.getMatchedBranches(value);
    }
    const { record } = this.props;
    // 选择开发者，自动勾上管理员 allow_push allow_merge
    if (['allow_merge'].includes(type)) {
      if (value.includes(30) && !value.includes(40)) {
        this.props.updateData({
          record: { ...record, [type]: [30, 40] },
        });

        return;
      }
    }
    if (type === 'allow_push') {
      this.props.updateData({
        record: { ...record, [type]: value ? value.split(',') : [] },
      });

      return;
    }
    this.props.updateData({
      record: { ...record, [type]: value },
    });
  };

  onRecordMergeRequestChange = (value, type) => {
    const { record } = this.props;
    if (record.merge_request) {
      record.merge_request[type] = value;
    } else {
      record.merge_request = {};
      record.merge_request[type] = value;
    }
    if (type === 'allow_push_users') {
      if (value) {
        record.allow_push_users = value;
      }
    }
    if (type === 'allow_merge_users') {
      if (value) {
        record.allow_merge_users = value;
      }
    }
    // 开启代码评审模式 required 需要设置默认的评审模式以及最少人数
    if (type === 'required') {
      if (value) {
        record.merge_request.mr_mode = 'general';
        record.merge_request.minimum_approval = 1;
        record.merge_request.allow_merge_request = [40, 30];
      }
    }
    // 选择开发者，默认勾上管理员
    if (type === 'allow_merge_request' && value.includes(30) && !value.includes(40)) {
      record.merge_request.allow_merge_request = [30, 40];
    }
    if (type === 'minimum_approval' && record.merge_request[type] === undefined) {
      record.merge_request[type] = '';
    }
    // 来回切换mr_mode,需要保持管理者一直有值
    if (type === 'mr_mode' && !record.merge_request.allow_merge_request.length) {
      record.merge_request.allow_merge_request = [40, 30];
      record.merge_request.minimum_approval = 1;
    }
    this.props.updateData({
      record: JSON.parse(JSON.stringify(record)),
    });
  };

  onSelectMember = (value) => {
    this.onRecordMergeRequestChange(value, 'default_assignees');
  };
  onSelectMemberPush = (value) => {
    this.onRecordMergeRequestChange(value, 'allow_push_users');
  };
  onSelectMemberMerge = (value) => {
    this.onRecordMergeRequestChange(value, 'allow_merge_users');
  };

  onInputWhiteNames = (value) => {
    this.onRecordMergeRequestChange(value, 'white_list');
  };

  goServices = () => {
    this.props.updateData({
      isBranchCompleted: false,
    });
    const { pathResource } = window.FORCE;
    navigate(`/${pathResource.fullPath}/settings/services`);
  };

  getTestNames = (test_setting) => {
    const { integration_service_setting } = this.props;
    const keys = Object.keys(test_setting) || [];
    const curTestNames = [];
    const openedTest = testNames.filter((item) => {
      const test = integration_service_setting[item.key];
      return test && test.enabled && test.mr_trigger;
    });
    openedTest.forEach((item) => {
      item.value =
        test_setting[item.key] && keys.indexOf(item.key) > -1
          ? !!test_setting[item.key].enabled
          : false;
      curTestNames.push(item);
    });
    return curTestNames;
  };

  render() {
    const { init } = this.field;
    const { matchedBranchList } = this.state;
    const { modalType, record = {} } = this.props;
    const {
      branch = '',
      allow_merge = [40, 30],
      allow_push = [40, 30],
      test_setting = {},
      merge_request = {},
      allow_push_users = [],
      allow_merge_users = [],
    } = record;
    const {
      required = false,
      mr_mode = 'general',
      allow_self_approval = false,
      minimum_approval = 1,
      allow_merge_request = [40, 30],
      default_assignees = [],
      is_require_discussion_processed = false,
      white_list = '',
    } = merge_request;

    console.log(is_require_discussion_processed);

    const curTestNames = this.getTestNames(test_setting);

    // const switchStatus = this.props.goServiceSetting || test_setting.required;

    return (
      <React.Fragment>
        {this.props.isModalOpen ? (
          <Dialog
            title={
              modalType === 'edit'
                ? intl.get({
                  id: 'code-assets.containers.protectedModal.ModifyBranchProtectionRules',
                  defaultMessage: '修改保护分支规则',
                })
                : intl.get({
                  id: 'code-assets.containers.protectedModal.CreateAProtectionBranchRule',
                  defaultMessage: '新建保护分支规则',
                })
            }
            visible
            style={{ width: '680px' }}
            onOk={this.handleOk}
            onCancel={this.onClose}
            onClose={this.onClose}
            okProps={{
              loading: this.props.isUpdatingRecord,
              disabled: this.props?.record?.merge_request?.minimum_approval === '',
            }}
          >
            <div className="add-protected-branch-wrapper">
              <Form field={this.field} labelAlign="top">
                <div className="modal-item branch-name-item">
                  <FormItem
                    label={intl.get({
                      id: 'code-assets.containers.protectedModal.Branch',
                      defaultMessage: '分支',
                    })}
                    required
                    help={
                      !matchedBranchList.length ? (
                        <div className="branch-name-tip">
                          {intl.get({
                            id: 'code-assets.containers.protectedModal.DoISupportWildcardsAnd',
                            defaultMessage: '支持通配符 ? 和 * ，如：*-stable 或 release/*',
                          })}
                        </div>
                      ) : (
                        ''
                      )
                    }
                  >
                    <BranchAndTagSelect
                      value={branch}
                      autoComplete
                      autoFocus
                      autoWidth
                      onChange={(value) => {
                        this.onBranchChange('from', value);
                      }}
                      needTagSearch={false}
                      noDefaultValue
                      placeholder={intl.get({
                        id: 'code-assets.containers.protectedModal.EnterABranchOrWildcard',
                        defaultMessage: '请输入分支或通配符规则',
                      })}
                      className="branch-name-input"
                      {...init('branch', {
                        initValue: branch,
                        rules: [
                          {
                            required: true,
                            message: intl.get({
                              id: 'code-assets.containers.protectedModal.ThisParameterIsRequired',
                              defaultMessage: '该项为必填项',
                            }),
                          },
                        ],
                      })}
                    />
                  </FormItem>
                  <div
                    className="branch-list"
                    style={{
                      display: matchedBranchList.length ? 'block' : 'none',
                    }}
                  >
                    <div className="branch-list-title">
                      {intl.get({
                        id: 'code-assets.containers.protectedModal.MatchingBranch',
                        defaultMessage: '匹配分支',
                      })}
                      {matchedBranchList.length}
                    </div>
                    <div className="branch-list-content">
                      {matchedBranchList.map((item) => {
                        return (
                          <span key={item.branch} className="branch-list-content-item">
                            <YunxiaoIcon type="merge-line" className="merge-icon" />

                            <span>{item.branch}</span>
                          </span>
                        );
                      })}
                      <span>
                        <YunxiaoIcon type="merge-line" />
                      </span>
                    </div>
                  </div>
                </div>
                <div className="modal-item">
                  <div className="modal-item-label">
                    {intl.get({
                      id: 'code-assets.containers.protectedModal.PushRules',
                      defaultMessage: '推送规则',
                    })}
                  </div>
                  <FormItem
                    label={intl.get({
                      id: 'code-assets.containers.protectedModal.PushAllowed',
                      defaultMessage: '允许推送',
                    })}
                    {...formItemLayout}
                    required
                    style={{ marginBottom: 12 }}
                  >
                    <div className="project_admin">
                      <span>角色</span>
                      <Radio.Group
                        dataSource={allowPushDataSource}
                        value={allow_push.join()}
                        onChange={(value) => {
                          this.onChange(value, 'allow_push');
                        }}
                      />
                    </div>
                    {getFeature('project.setting.branch_setting.push_merge.users') && (
                      <div className="project_user">
                        <span>用户</span>
                        <MemberTrigger
                          usersFilterAccess={30}
                          useExtraMember="project"
                          onChange={this.onSelectMemberPush}
                          value={allow_push_users}
                          align="bl tl"
                          followTrigger={false}
                          multiple
                        />
                      </div>
                    )}
                  </FormItem>
                </div>
                <div className="modal-item">
                  <div className="modal-item-label">
                    {intl.get({
                      id: 'code-assets.containers.protectedModal.MergeRules',
                      defaultMessage: '合并规则',
                    })}
                  </div>
                  <FormItem
                    label={intl.get({
                      id: 'code-assets.containers.protectedModal.MergeAllowed',
                      defaultMessage: '允许合并',
                    })}
                    {...formItemLayout}
                    required
                    style={{ marginBottom: 12 }}
                  >
                    <div className="project_admin">
                      <span>角色</span>
                      <Checkbox.Group
                        itemDirection="hoz"
                        value={allow_merge}
                        style={{ marginRight: 6 }}
                        onChange={(value) => {
                          this.onChange(value, 'allow_merge');
                        }}
                      >
                        {roles.map((item) => {
                          return (
                            <Checkbox
                              value={item.value}
                              key={item.value}
                              disabled={item.value === 40}
                            >
                              {item.label}
                            </Checkbox>
                          );
                        })}
                      </Checkbox.Group>
                    </div>
                    {getFeature('project.setting.branch_setting.push_merge.users') && (
                      <div className="project_user">
                        <span>用户</span>
                        <MemberTrigger
                          usersFilterAccess={30}
                          useExtraMember="project"
                          onChange={this.onSelectMemberMerge}
                          value={allow_merge_users}
                          align="bl tl"
                          followTrigger={false}
                          multiple
                        />
                      </div>
                    )}
                  </FormItem>
                </div>
                <div className="modal-item no-padding" style={{ paddingBottom: 20 }}>
                  <div className="modal-item-content">
                    <Switch
                      name="switch"
                      checked={required}
                      onChange={(value) => {
                        this.onRecordMergeRequestChange(value, 'required');
                      }}
                    />

                    <div className="need-mr-title">
                      {intl.get({
                        id: 'code-assets.containers.protectedModal.CodeReviewIsRequiredBefore',
                        defaultMessage: '要求合并前通过代码评审',
                      })}
                    </div>
                  </div>
                  {required ? (
                    <div id="mr-setting-wrapper">
                      <div className="signle-checkbox">
                        <Checkbox
                          checked={allow_self_approval}
                          onChange={(value) => {
                            this.onRecordMergeRequestChange(value, 'allow_self_approval');
                          }}
                          label={intl.get({
                            id: 'code-assets.containers.protectedModal.AllowTheCreatorToPass',
                            defaultMessage: '允许创建者通过',
                          })}
                        />
                      </div>
                      <div className="signle-checkbox">
                        <Checkbox
                          checked={is_require_discussion_processed}
                          onChange={(value) => {
                            this.onRecordMergeRequestChange(
                              value,
                              'is_require_discussion_processed',
                            );
                          }}
                          label={intl.get({
                            id: 'code-assets.containers.protectedModal.AllRequestedCommentsResolved',
                            defaultMessage: '要求评论全部已解决',
                          })}
                        />
                      </div>
                      <FormItem
                        label={intl.get({
                          id: 'code-assets.containers.protectedModal.ReviewMode',
                          defaultMessage: '评审模式',
                        })}
                        {...formItemLayout}
                        required
                        style={{ marginBottom: 8 }}
                      >
                        <Radio.Group
                          dataSource={mergeModes}
                          value={mr_mode}
                          onChange={(value) => {
                            this.onRecordMergeRequestChange(value, 'mr_mode');
                          }}
                        />

                        {
                          mergeModes.find(item => item.value === 'codeowner') && (
                            <Balloon
                              trigger={
                                <ButtonIcon name="question-line" className="codeowner-question-tip" />
                              }
                              align="t"
                              closable={false}
                              popupContainer={() => {
                                return document.getElementById('mr-setting-wrapper');
                              }}
                            >
                              <div className="codeowner-tip">
                                <div>
                                  {intl.get({
                                    id: 'code-assets.containers.protectedModal.InThisModeTheReview',
                                    defaultMessage:
                                      '该模式下评审规则由目标分支的 CODEOWNERS 文件定义，合并前至少需要 1 人评审通过。',
                                  })}
                                </div>
                                <a href={docs('codeownerMachineMade')} target="_blank" rel="noreferrer">
                                  {intl.get({
                                    id: 'code-assets.containers.protectedModal.HowDoIUseCodeowners',
                                    defaultMessage: '如何使用 CODEOWNERS 文件？',
                                  })}
                                </a>
                              </div>
                            </Balloon>
                          )
                        }
                      </FormItem>

                      <div
                        className="require-review-wrapper"
                        style={{
                          display: mr_mode === 'codeowner' ? 'none' : 'block',
                        }}
                      >
                        <FormItem
                          label={intl.get({
                            id: 'code-assets.containers.protectedModal.AllowMergeRequests',
                            defaultMessage: '允许通过合并请求',
                          })}
                          {...formItemLayout2}
                          style={{ marginBottom: 8 }}
                          required
                        >
                          <Checkbox.Group
                            itemDirection="hoz"
                            onChange={(value) => {
                              this.onRecordMergeRequestChange(value, 'allow_merge_request');
                            }}
                            value={allow_merge_request}
                          >
                            {roles.map((item) => {
                              return (
                                <Checkbox
                                  value={item.value}
                                  key={item.value}
                                  disabled={item.value === 40}
                                >
                                  {item.label}
                                </Checkbox>
                              );
                            })}
                          </Checkbox.Group>
                        </FormItem>
                        <FormItem
                          label={intl.get({
                            id: 'code-assets.containers.protectedModal.MinimumNumberOfApprovedPersons',
                            defaultMessage: '评审通过的最少人数',
                          })}
                          {...formItemLayout2}
                          style={{ marginBottom: 8 }}
                        >
                          <NumberPicker
                            min={1}
                            value={minimum_approval}
                            onChange={(value) =>
                              this.onRecordMergeRequestChange(value, 'minimum_approval')
                            }
                          />
                        </FormItem>
                        <FormItem
                          label={intl.get({
                            id: 'code-assets.containers.protectedModal.DefaultReviewer',
                            defaultMessage: '默认评审者',
                          })}
                          {...formItemLayout2}
                          className="no-mr-b"
                        >
                          <MemberTrigger
                            useExtraMember="project"
                            onChange={this.onSelectMember}
                            value={default_assignees}
                            align="bl tl"
                            followTrigger={false}
                            multiple
                          />
                        </FormItem>
                        <FormItem
                          label={
                            <span>
                              {intl.get({
                                id: 'code-assets.containers.protectedModal.ReviewDocumentWhitelist',
                                defaultMessage: '评审文件白名单',
                              })}

                              <Balloon
                                closable={false}
                                align="t"
                                trigger={<YunxiaoIcon type="question-line" />}
                              >
                                <span style={{ marginRight: 8 }}>
                                  {intl.get({
                                    id: 'code-assets.containers.protectedModal.DocumentsAddedToTheWhitelist',
                                    defaultMessage:
                                      '加入白名单的文件不受「评审通过的最少人数」限制，无需强制人工评审',
                                  })}
                                </span>
                                <a
                                  href={docs('whatIsTheWhitelistOf')}
                                  target="_blank"
                                  rel="noreferrer"
                                >
                                  {intl.get({
                                    id: 'code-assets.containers.protectedModal.LearnMore',
                                    defaultMessage: '了解更多',
                                  })}
                                </a>
                              </Balloon>
                            </span>
                          }
                          {...formItemLayout2}
                          className="no-mr-b"
                        />

                        <FormItem className="no-mr-b" style={{ margin: '0 28px' }}>
                          <Input.TextArea
                            value={white_list}
                            onChange={this.onInputWhiteNames}
                            hasLimitHint
                            rows={5}
                            maxLength={3000}
                            placeholder={intl.get({
                              id: 'code-assets.containers.protectedModal.EnterTheFilePathSeparate',
                              defaultMessage: '输入文件路径，多行以换行隔开，通配符请使用英文格式',
                            })}
                          />
                        </FormItem>
                        <ul className="textarea-desc">
                          <li>
                            {intl.get({
                              id: 'code-assets.containers.protectedModal.MatchesAnyOneCharacterSuch',
                              defaultMessage:
                                '？匹配任意1个字符，如：codeup/t?st.java 匹配 codeup/test.java 或 codeup/tast.java',
                            })}
                          </li>
                          <li>
                            {intl.get({
                              id: 'code-assets.containers.protectedModal.MatchOrMoreCharactersFor',
                              defaultMessage:
                                '*  匹配0或多个字符，如：codeup/*.java 匹配 codeup 目录下所有 Java 文件',
                            })}
                          </li>
                          <li>
                            {intl.get({
                              id: 'code-assets.containers.protectedModal.MatchesOrMoreDirectoriesFor',
                              defaultMessage:
                                '** 匹配0或多个目录，如：**.java 匹配所有目录下的 Java 文件',
                            })}
                          </li>
                        </ul>
                      </div>
                    </div>
                  ) : null}
                </div>
                <div className="modal-item no-padding">
                  <div className="modal-item-content">
                    <Switch
                      name="switch"
                      checked={test_setting.required}
                      onChange={(value) => {
                        this.onTestSettingChange(value, 'required');
                      }}
                    />

                    <div className="need-test-title">
                      {intl.get({
                        id: 'code-assets.containers.protectedModal.RequiresAutomatedCheckBeforeMerging',
                        defaultMessage: '要求合并前通过自动化执行检查',
                      })}
                    </div>
                  </div>
                  <div
                    className="test-items"
                    style={{
                      display: test_setting.required ? 'block' : 'none',
                    }}
                  >
                    {curTestNames.length ? (
                      this.renderTestNames(curTestNames)
                    ) : (
                      <div className="no-test-name">
                        {intl.get({
                          id: 'code-assets.containers.protectedModal.NoTestTaskIsConfigured',
                          defaultMessage: '当前未配置测试任务，请',
                        })}

                        <span className="cursor add-test" onClick={this.goServices}>
                          {intl.get({
                            id: 'code-assets.containers.protectedModal.Add',
                            defaultMessage: '添加',
                          })}
                        </span>
                      </div>
                    )}

                    {this.renderFlowName(test_setting)}
                  </div>
                </div>
              </Form>
            </div>
          </Dialog>
        ) : null}
      </React.Fragment>
    );
  }
}
